const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isDev = process.env.NODE_ENV === 'development';

const config = {
  context: path.resolve(__dirname, "./src"),
  // entry: './app.js',
  entry: {
    'vendor': ['angular', '@uirouter/angularjs'],
    'app': './app.js',
  },
  output: {
    filename: isDev ? 'bundle.js' : 'bundle.[chunkhash:8].js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader'
      ]
    }, {
      test: /\.scss$/,
      use: [
        {
          loader: isDev ? 'style-loader' : MiniCssExtractPlugin.loader // 生产环境下将css文件分离打包
        },
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: true // 如果前一个loader生成过sourceMap，则直接使用
          }
        },
        'sass-loader'
      ]
    }, {
      test: /\.html$/,
      use: {
        loader: 'html-loader'
      }
    }, {
      test: /\.(jpg|jped|png|gif|svg)$/,
      use: {
        loader: 'url-loader', // 将图片转为base64格式(依赖file-loader)
        options: {
          limit: 1024, // 只转换小于1024kb的图片,
          name: '[name].[ext]' // 定义图片输出名称
        }
      }
    }]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"' // 定义环境判断变量，此变量可以在JS脚本中使用
      }
    }),
    // new HtmlWebpackPlugin({
    //   filename: 'index.html',
    //   template: path.resolve(__dirname, "./src/index.html"), // 配置单页应用入口html文件
    //   favicon: path.resolve(__dirname, "./src/favicon.ico"), // 配置小图标
    //   inject: true
    // }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./src/index.html"),
      //inject        : 'body',
      chunks: ['vendor', 'app'],
      chunksSortMode: 'dependency'
    }),
    new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns: ['dist']}), // 编译时清空文件夹
    new MiniCssExtractPlugin({
      filename: 'style.[contentHash:8].css' // 分离的css文件名
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default']
    })
  ]
};

if (isDev) {
  config.devtool = '#cheap-modules-eval-source-map';
  config.mode = 'development';
  config.devServer = {
    host: 'localhost', // 配置为'0.0.0.0'使用IP地址或localhost均可访问
    port: 8081, // 端口默认8080
    // open: true, // 服务启动后，自动打开页面
    overlay: {
      errors: true
    },
    hot: true // 启用编辑热更新，修改代码后会部分更新页面而不会刷新(依赖webpack.HotModuleReplacementPlugin)
  };
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin()
    // new webpack.NoEmitOnErrorsPlugin()
  );
  config.optimization = {
    noEmitOnErrors: true
  }
} else {
  config.mode = 'production';
}

module.exports = config;